<!--
 * @Author: long
 * @Date: 2021-08-30 18:37:36
 * @LastEditTime: 2021-10-12 10:41:38
 * @LastEditors: Please set LastEditors
 * @Description: 应用列表
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\application-manage\applicationList\index.vue
-->
<style lang="less" scoped>
.secret_key {
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
}
</style>
<template>
  <div class="app_container">
    <div class="box_style">
     <div class="flexbetween pb25"><span class="table_tit_txt">应用列表</span> 
     <div><a-button type="primary" class="mr10" @click="getTableList">刷新</a-button><a-button type="primary" @click="goAddApp"><a-icon type="plus" /> 创建应用</a-button></div>
     </div>
      <a-table
        :columns="columns"
        :scroll="{ y: 600 }"
        :dataSource="tableData"
        :loading="loading"
        :rowKey="(tableDatas) => tableDatas.id"
        :pagination="paginationHandle"
      >
      <div slot="apiSecret" slot-scope="text, row">
       <div>
           <span>{{ row.apiSecretStatus ? row.apiSecret : row.apiSecretHide }}</span> <span class="theme_col secret_key" @click="apiSecretStatusHandle(row)">{{ row.apiSecretStatus ? '隐藏' : '显示' }}</span>
       </div>
      </div>
      <div slot="action" slot-scope="text, row">
       <span class="theme_col pointer pr10" @click="goEdit(row)" v-show="row.roleType !== 'default'">设置</span>
       <span class="theme_col pointer pr10" @click="goRoleDetails(row)">报表</span> 
       <span class="pointer danger_col" @click="delAppParamHandle(row)">删除</span>
      </div>
      </a-table>
      
      <a-modal
        title="应用删除确认"
        :visible="visible_delApp"
        width="22%"
        @cancel="delApp_handleCancel"
        :maskClosable="false"
       >
       <div class="del_app_cont">
           <p>注意！删除应用，与应用相关的数据也将一并删除，确认删除吗？</p>
             <a-form-model ref="rulePassForm" :model="rulePassForm" :rules="rulePass">
                  <a-form-model-item prop="password">
                    <a-input-password v-model="rulePassForm.password" allow-clear type="password" placeholder="请输入管理员密码" />
                </a-form-model-item>
             </a-form-model>
       </div>
        <div slot="footer">
        <a-button @click="delApp_handleCancel">取消</a-button>
        <a-button type="danger" :loading="delApp_confirmLoading" @click="delApp_handleOk('rulePassForm')">删除应用及相关数据</a-button>
      </div>
     </a-modal>
    </div>
  </div>
</template>
<script>
import { delApp, appList } from '@/api/application-manage/application'
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          width: 80,
          customRender: (text, record, index) =>
            `${(this.paginationHandle.defaultCurrent - 1) * this.paginationHandle.defaultPageSize + index + 1}`,
        },
        { title: "应用名称", dataIndex: "name", width: 140},
        { title: "App id", dataIndex: "id", scopedSlots: { customRender: 'primaryUserId' }, width: 80},
        { title: "api Key", dataIndex: "apiKey", width: 300 },
        { title: "Secret Key", dataIndex: "apiSecret", scopedSlots: { customRender: 'apiSecret' }, width: 140 },
        { title: "创建时间", dataIndex: "createTime", width: 140 },
        { title: "操作", dataIndex: "action", width: 140, scopedSlots: { customRender: 'action' }}
      ],
      tableData: [],
      loading: true,
      paginationHandle: {
        defaultCurrent: 1,
        defaultPageSize: 20,
        total: 0,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["20", "30", "40", "50", '60', '70'],
        showTotal: (total) => `共 ${total} 条`,
        onShowSizeChange: (current, pageSize) => {
          this.paginationHandle.defaultCurrent = 1
          this.paginationHandle.defaultPageSize = pageSize
          this.getTableList()
        },
        onChange: (current, size) => {
          this.paginationHandle.defaultCurrent = current
          this.paginationHandle.defaultPageSize = size
          this.getTableList()
        },
      },
      pagingQuery: {
        current: 1,
        size: 20,
        total: 20,
      },
      
// 删除应用
      delApp_confirmLoading: false,
      visible_delApp: false,
      rowId: '',
      name: '',
      rulePassForm: {
          password: ''
      },
     rulePass: {
        password: [{ required: true, message: '请输入管理员密码',  trigger: 'blur' }],
      },
    }
  },
  filters: {
      filterRoleType(val) {
          return val === 'default' ? '默认' : '自定义'
   },
 },
  methods: {
    apiSecretStatusHandle(row) {
        console.log("🚀 ~ file: index.vue ~ line 151 ~ apiSecretStatusHandle ~ row", row)
        row.apiSecretStatus = !row.apiSecretStatus
    },
    getTableList() {
      this.loading = true
      appList(this.pagingQuery).then((res) => {
        if (res.code == 0) {
          res.data.forEach((item) => {
            item.apiSecretStatus = false, item.apiSecretHide = '******'
          })
          this.tableData = res.data.reverse()
        } else {
          this.$msg.error(res.msg)
        }
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pagingQuery.size = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.pagingQuery.current = val
      this.getTableList()
    },
    goRoleDetails(row) {
      this.addRouterQuery('/application-log/applicationLog', {
        id: row.id,
        name: row.name,
        })
    },
     goEdit(row) {
      this.addRouterQuery('editApplication', {
        id: row.id,
        // name: row.name,
        })
    },
    addRouterQuery(path, params) {
      this.$router.push({
        path: path,
        query: params
      })
    },
    goAddApp() {
      this.$router.push({path: 'addApplication'})
    },
    delAppParamHandle(row) {
        this.rowId = row.id, this.name = row.name, this.visible_delApp = true
    },
    delApp_handleOk(formName, id) {
      this.$refs[formName].validate(valid => {
        if (valid) {
         this.delApp_confirmLoading = true
         
         let rowId = new Promise((resolve, reject) => {
             this.rowId ? resolve(this.rowId) : reject(null)
         })
         let name = new Promise((resolve, reject) => {
             this.name ? resolve(this.name) : reject(null)
         })
         
         Promise.all([rowId, name]).then((val) => {
         delApp(
             {
                 id: this.rowId,
                 password: this.rulePassForm.password
             }
         ).then((res) => {
             if(res) {
                 this.$msg.success(`应用：${ val[1] }已删除`), this.getTableList()
                 this.delApp_confirmLoading = false, this.visible_delApp = false
             } else {
                 this.delApp_confirmLoading = false
             }
         })
         }).catch((err) => console.log(err))
         
        } else {
          return false
        }
      })
    },
    delApp_handleCancel() {
      this.visible_delApp = false
    }
  },
  created() {
    this.getTableList()
  },
  mounted() {
  }
}
</script>